<template>
     <div>
          <div class="video-box">
               <video 
               :src="obj.content"
               :poster="obj.cover[0].url  | fixImgUrl"
               width="100%"
               ref="video"
               >
                    您的浏览器不支持 video 标签
               </video>
          <div class="mask" ref="mask" @click="playVideo"></div>
          </div>
          <div class="video-info">
               <div class="authorinfo">
                  <div><i class="iconfont iconwode"></i>{{obj.user.nickname}}</div>
                  <span>关注</span>
               </div>
               <h3>{{obj.title}}</h3>
               <div class="other">
                  <div>
                       <i class="iconfont icondianzan"></i>
                       {{obj.comment_length}}
                  </div>
                  <div>
                       <i class="iconfont iconweixin"></i>微信
                  </div>
               </div>
          </div>
          <PostArea></PostArea>
          <CommentArea></CommentArea>
          </div>
</template>

<script>
import PostArea from '../../components/PostArea'
import CommentArea from '../../components/CommentArea'
export default {
     data(){
          return{
               obj:{
                    title:'',
                    content:'',
                    comment_length:0,
                    cover:[{'url':''}],
                    user:{
                         nickname:''
                    }
               }
          }
     },
     components:{
          PostArea,
          CommentArea
     },
     methods:{
          getDetail(){
               this.$axios({
                    url:'/post/' + this.$route.params.id,
               }).then(res => {
                   this.obj = res.data.data;
               })
          },
          playVideo(){
               this.$refs.mask.style.display = 'none';
               this.$refs.video.addEventListener('play',function(){
                  console.log("开始播放");
               });
          }
     },
     mounted(){
         this.getDetail(); 
     }

}
</script>

<style lang="less" scoped>
.video-box{
     position: relative;
     height:56.111vw;
     background-color: pink;
     .mask{
          position: absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          background: rgba(0, 0, 0, .5) url('../../assets/arr.png') no-repeat center;
     }
}
.video-info{
     padding: 4.167vw 6.111vw 5vw 6.111vw;
     border-bottom: 1.667vw solid #E4E4E4;
     .authorinfo{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          >div{
               font-size: 4.444vw;
               color: #868686;
               .iconfont{
                    font-size: 6.667vw;
                    color:#d7d7d7;
               }
          }
          span{
               padding:1.111vw 4.167vw;
               font-size: 3.889vw;
               color: #333;
               border:1px solid #d7d7d7;
               border-radius: 4.167vw;
          }
     }
     h3{
          padding:6.111vw 0;
          font-size: 4.444vw;
          font-weight: 400;
          color:#333333;
          // text-overflow: ellipsis;
          // /* 弹性伸缩盒子模型显示 */
          // display: -webkit-box;
          // /* 限制在一个块元素显示的文本的行数 */
          // -webkit-line-clamp: 2;
          // /* 设置或检索伸缩盒对象的子元素的排列方式 */
          // -webkit-box-orient: vertical;
          // overflow: hidden;
     }
     .other{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          >div{
               padding:1.667vw 5.556vw;
               border:1px solid #d7d7d7;
               border-radius: 5.556vw;
               font-size: 3.889vw;
               color: #333;
               .icondianzan{
                    margin-right: 1.667vw;
                    color: #000;
               }
               .iconweixin{
                    margin-right: 1.667vw;
                    color:#00C800;
               }
          }
     }
}

</style>